import { ITodoData } from "../../typings";
import Input, { IInputOptions } from './Subs/Input';
import List, { IListOptions } from './Subs/List';
class TodoList {
    private el: HTMLElement;
    private todoData: ITodoData[];
    private input: Input;
    private list: List;
    // 用于存放子组件的容器
    private todoWrapper:HTMLElement;
    constructor(el: HTMLElement, todoData: ITodoData[]) {
        this.el = el;
        this.todoData = todoData;
        this.todoWrapper = document.createElement("div");
    }
    // 组件初始化
    public init() {
        console.log('组件初始化');
        this.createComponents();
        this.render();
        this.bindEvent();
    }
    // 实例化子组件
    private createComponents() {
        console.log('创建组件');
        this.input = new Input(<IInputOptions>{
            wrapperEl:this.todoWrapper,
            placeholderText:'请输入',
            buttonText:'增加'
        });
        this.list = new List(<IListOptions>{
            wrapperEl:this.todoWrapper,
            todoData:this.todoData
        });
    }
    // 组件渲染
    private render() {
        console.log('组件渲染');
        this.input.render();
        this.list.render();
        this.el.appendChild(this.todoWrapper);
    }
    // 事件绑定
    private bindEvent() {
        console.log('事件绑定');
        this.input.bindEvent();
        this.list.bindEvent();
        
    }
}

export default TodoList;